<template>
  <div>
    <h1>如颖随鑫</h1>
    <div>{{ count }}</div>
    <button @click="addCount">点我加1</button>
    <RouterLink to="/about">去about页面</RouterLink>
    <button @click="goAnimation">去animation页面</button>
    <RouterLink to="/contact">去connect页面</RouterLink>
    <RouterLink to="/slide">去slide页面</RouterLink>
    <h2>水印图👇</h2>
    <Watermark content="如颖随鑫" :fontsize="30">
      <div class="watermark-box1"></div>
    </Watermark>
    <Watermark content="禁止转载" :fontsize="20">
      <div class="watermark-box2"></div>
    </Watermark>
    <img src="http://www.abc.com" />
    <img src="http://www.autoimg.com" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import Watermark from '@/components/watermark/index.vue'

const router = useRouter()
const count = ref<number>(0)

const addCount = () => {
  count.value = count.value + 1
}

const goAnimation = () => {
  router.push({
    name: 'animation'
  })
}
</script>

<style scoped lang="scss">
.watermark-box1 {
  width: 400px;
  height: 300px;
  background-color: skyblue;
}

.watermark-box2 {
  width: 300px;
  height: 300px;
  background-color: grey;
}

.aaaa {
  background-color: url('https://www.coffee.com/imgs/bg.png');
}

.bbbb {
  background-color: url('https://www.coffee.com/imgs/main-bg.png');
}

.cccc {
  background-color: url('https://www.example.com/imgs/main-bg.png');
}
</style>
